<template>
  <div class="goods-accounts">
    <div class="title">商品账目</div>
    <div class="operation-box">

      <el-button type="primary" :icon="Refresh" @click="table_reload"
        >刷新</el-button
      >
      <el-button
        type="danger"
        v-if="table_data_origin && table_data_origin.length > 0"
        :icon="Download"
        @click="export_excel(table_data_origin, '商品账目')"
        >导出数据</el-button
      >

      <el-input
        v-model="search_goods_name"
        class="w-50 m-2"
        size="default"
        style="width: 180px; margin: 0 10px 0 30px"
        clearable
        :prefix-icon="Search"
        @input="search_filter"
        placeholder="输入商品名称搜索"
      />

      <el-button type="default" @click="search_reset">重置</el-button>
    </div>
    <el-table
      :data="table_data"
      :summary-method="getSummaries"
      show-summary
      stripe
      v-loading="table_loading"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="goods_id" label="ID" width="100" />
      <el-table-column prop="goods_name" label="商品名称" />
      <el-table-column prop="cost" label="单个成本(元)" />
      <el-table-column prop="price" label="单价(元)" />
      <el-table-column prop="profit" label="单个利润(元)" />
      <el-table-column prop="total_cost" label="总成本(元)" />
      <el-table-column prop="total_sold_cost" label="总售出成本(元)" />
      <el-table-column prop="total_price" label="总售价(元)" />
      <el-table-column prop="total_profit" label="总利润(元)" />
      <el-table-column prop="quantity_sold" label="售出量(件)" />
      <el-table-column prop="stock" label="库存量(件)" />
    </el-table>
  </div>    
</template>

<script setup lang="ts">
import { computed, ref, reactive } from "vue";
import type { TableColumnCtx, } from "element-plus";
import {
  Refresh,
  Download,
} from "@element-plus/icons-vue";
import { export_excel } from "../../../common/utils";
import { getGoods } from "../../ajaxServices/goods"

interface Goods {
  goods_id: number; // 商品id
  goods_name: string; // 商品名称
  stock: number; // 商品库存
  quantity_sold: number; // 售出数量
  cost: number; // 成本
  price: number; // 单价
}
const table_data_origin = ref([]);

const table_data = ref<Goods>(table_data_origin.value);

interface SummaryMethodProps<T = Goods> {
  columns: TableColumnCtx<T>[];
  data: T[];
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "总计";
      return;
    }
    const values = data.map((item: any) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      let sum_data = values
        .reduce((prev: number, curr: number) => {
          const value = Number(curr);
          if (!Number.isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)
        .toFixed(2);
      sums[index] =
        index == 9 || index == 10 ? `${Number(sum_data)}件` : `￥ ${sum_data}`;
    } else {
      sums[index] = "N/A";
    }
  });

  return sums;
};

const table_loading = ref(false)
// 刷新表格数据
const table_reload = () => {
  table_loading.value = true;

  getGoods({}).then((res: any) => {
    // 计算填入后几项       stock
    res.data && res.data.map((_:any) => {
      _.profit = Number(_.price) - Number(_.cost);
      _.total_cost = (Number(_.cost)*Number(_.stock)).toFixed(2);
      _.total_sold_cost = (Number(_.cost)*Number(_.quantity_sold)).toFixed(2);
      _.total_price = (Number(_.price)*Number(_.quantity_sold)).toFixed(2);
      _.total_profit = ((Number(_.price)-Number(_.cost))*Number(_.quantity_sold)).toFixed(2);
      _.quantity_sold = _.quantity_sold;

    })

    table_loading.value = false;
    table_data_origin.value = res.data || [];
    table_data.value = res.data || [];

  }).catch(() => {table_loading.value = false;})

};
table_reload()

// 搜索商品
const search_goods_name = ref("");
const search_filter = () => {
  if (search_goods_name.value == "") {
    table_data.value = table_data_origin.value;
    return;
  }

  if (search_goods_name.value != "") {
    table_data.value = table_data_origin.value.filter((data: any) =>
      data.goods_name.toLowerCase().includes(search_goods_name.value.toLowerCase())
    );
  }
};
// 重置搜索框
const search_reset = () => {
  search_goods_name.value = "";
  table_data.value = table_data_origin.value;
};




</script>

<style scoped lang="scss">
.goods-accounts {
  width: 95%;
  height: 80%;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: auto;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);

  .title {
    width: 100%;
    height: 55px;
    font-size: 18px;
    color: #000;
    text-align: left;
    line-height: 55px;
    text-indent: 20px;
    border-bottom: 1px solid #eee;
  }

  .operation-box {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
}
</style>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: #fafcff;
}
</style>
